/*
 * 机器试妆参数编辑修改
 * @Author: zfx
 * @Date: 2018-07-3 11:50:27
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

   .v-customer-machine-edit {
		max-height: 80vh;
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
        .machine-form {
            width: 350px;
        }
    }

</style>
<template>
	<div class="v-customer-machine-edit">

		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(130, 120)"
					name="edit-form"
					class="machine-form">

					<Form-item
						:label="$t('machine.model')"
						prop="code">
						<i-input
							v-model="formValidate.code"
							:placeholder="$t('machine.please_enter_model')"
							name="edit-code"
							type="text"/>
					</Form-item>

					<Form-item
						v-for="item in machinesInfo"
						:key="item.field_name"
						:label="item.name">
						<Slider
							:value="Number(item.default_value)"
							:step="0.01"
							:min="Number(item.min_value)"
							:max="Number(item.max_value)"
							:name="`create-${item.name}`"
							show-input
							@on-change="changeSlider($event,item.field_name)"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.update') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {

	name: 'MachineParametersEdit',
	mixins: [labelWidthMixin],
	props: {
		machineDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		machinesInfo: {
			type: Array,
			default() {
				return [];
			},
		},
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},
	data() {
		return {
			formValidate: {

				code: '', // 参数型号

			}, // 编辑美妆参数时的表单
			ruleValidate: {
				code: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('machine.model') }),
						trigger: 'blur,change',
					},
				],
			},
		};
	},

	watch: {
		machineDetail() {
			if (this.machineDetail && Object.keys(this.machineDetail).length > 0) {
				this.formValidate.code = this.machineDetail.code;

				this.machinesInfo.forEach((item) => {
					item.default_value = this.machineDetail[item.field_name];
				});
			}
		},
	},
	methods: {

		/**
		 * 动态设置数组参数值
		 * @param {Number} value {slider改变返回的值}
		 * @param {String} field_name {当前的field_name}
		 */
		changeSlider(value, field_name) {
			this.machinesInfo.forEach((machine) => {
				if (machine.field_name === field_name) {
					machine.default_value = value;
				}
			});
		},

		/**
         * 更新机器试妆参数信息
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('update', this.machineDetail.id, this.formDataCreate());
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
		formDataCreate() {
			const new_object = {

				_method: 'PUT',

				code: this.formValidate.code,

			};

			this.machinesInfo.forEach((machine) => {
				new_object[machine.field_name] = Number(machine.default_value);
			});

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});
			return form_data;
		},

	},
};
</script>
